import React, { Component } from "react";
import { Swipe } from "react-vant";
import { getShopList, getShopSearch } from "../api/index";
import debounce from "../utils/debounce";
import { PullRefresh } from "react-vant";

import ORDER from "../images/订单.png";
import LOGO from "../images/快速购药logo.png";
import PLEDGE from "../images/保证.png";
import SKIN from "../images/皮肤用药.png";
import INWARD from "../images/妇科用药.png";
import DEPARTMENT from "../images/肠胃消化.png";
import BREATHE from "../images/呼吸用药.png";
import NUTRITION from "../images/营养补充.png";
import FAMILY from "../images/家庭常备.png";
import EAR from "../images/耳鼻咽喉.png";
import ANDROLOGY from "../images/男科用药.png";
import BONE from "../images/骨科疼痛.png";
import HEART from "../images/心脑血管.png";
import LOOK from "../images/医我看.png";
import RECOMMEND from "../images/推荐.png";
import BEAUTIFUL from "../images/美丽容颜.png";

export default class Shop extends Component {
  state = {
    list: [],
    iptvalue: "",
  };
  componentDidMount() {
    this.getList();
  }
  getList() {
    getShopList().then((res) => {
      this.setState({
        list: res.data.data,
      });
    });
  }
  //下拉刷新
  onRefresh() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, 1000);
    });
  }
  //跳转详情
  shopDetail = (item) => {
    this.props.history.push({
      pathname: `/shopDetail/${item.id}`,
      state: { data: item },
    });
  };
  //跳转到商品列表
  goDepartment() {
    this.props.history.push("/department");
  }

  //搜索
  getshopSearch = async (value) => {
    await this.setState({
      iptvalue: value,
    });
    debounce(async () => {
      let res = await getShopSearch({ value: this.state.iptvalue });
      this.setState({
        list: res.data.data,
      });
    }, 1000);
  };
  render() {
    const images = [
      "https://img1.baidu.com/it/u=982930916,430043612&fm=26&fmt=auto",
      "https://img1.baidu.com/it/u=1474604075,3172391788&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=1779144847,898320374&fm=26&fmt=auto",
      "https://img2.baidu.com/it/u=2073343241,2509534685&fm=26&fmt=auto",
    ];
    const { list, iptvalue } = this.state;
    return (
      <div className="shop">
        <div className="header">
          <input
            type="text"
            placeholder="🔍请输入商品名称"
            onInput={(e) => {
              this.getshopSearch(e.target.value);
            }}
            value={iptvalue}
            className="search"
          />
          <img src={ORDER} alt="" />
        </div>
        <div className="content">
          <div className="menu">
            <p>
              <img src={LOGO} alt="" />
              <img src={PLEDGE} alt="" />
            </p>
            <div className="menuList">
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={SKIN} alt="" />
                </dt>
                <dd>皮肤用药</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={INWARD} alt="" />
                </dt>
                <dd>妇科用药</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={DEPARTMENT} alt="" />
                </dt>
                <dd>肠胃消化</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={BREATHE} alt="" />
                </dt>
                <dd>呼吸用药</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={NUTRITION} alt="" />
                </dt>
                <dd>营养补充</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={FAMILY} alt="" />
                </dt>
                <dd>家庭常备</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={EAR} alt="" />
                </dt>
                <dd>耳鼻咽喉</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={ANDROLOGY} alt="" />
                </dt>
                <dd>男科用药</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={BONE} alt="" />
                </dt>
                <dd>骨科疼痛</dd>
              </dl>
              <dl
                onClick={() => {
                  this.goDepartment();
                }}
              >
                <dt>
                  <img src={HEART} alt="" />
                </dt>
                <dd>心脑血管</dd>
              </dl>
            </div>
          </div>
          <Swipe autoplay={3000} lazy>
            {images.map((item) => (
              <Swipe.Item key={item}>
                <img className="swiper-lazy" src={item} alt="" />
              </Swipe.Item>
            ))}
          </Swipe>
          <div className="advertis">
            <p>
              <img src={LOOK} alt="" />
              <img src={RECOMMEND} alt="" />
            </p>
            <img src={BEAUTIFUL} alt="" />
          </div>
          <div className="shopList-box">
            {list.map((item, idx) => {
              return (
                <div
                  className="shopList"
                  key={idx}
                  onClick={() => {
                    this.shopDetail(item);
                  }}
                >
                  <dl>
                    <dt>
                      <img src={item.img} alt="" />
                    </dt>
                    <dd>
                      <div>{item.title}</div>
                      <div>￥{item.price}</div>
                    </dd>
                  </dl>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
